<template>
  <a-layout-header :class="[headerTheme, 'admin-header']">
    <div :class="['admin-header-wide', layout, pageWidth]">
      <!-- <router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', headerTheme]">
        <img width="32" src="@/assets/img/logo.png">
        <h1 v-if="!isMobile">{{ systemName }}</h1>
      </router-link> -->
      <!-- <a-divider v-if="isMobile" type="vertical" /> -->

      <!-- <div v-if="layout !== 'side' && !isMobile" class="admin-header-menu" :style="`width: ${menuWidth};`">
        <i-menu class="head-menu" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect" />
      </div> -->

      <div :class="['logo d-flex-i-f ai-center', theme]">
        <component :is="logoImg" v-if="!$store.state.setting.baseAppNameShow" @click="clickLogoHandler" />
        <span v-else class="ml-24 fs-16 text-color-004098">{{ $store.getters['setting/appBaseName'] }}</span>
        <span class="fs-16 fw-b" style="color:#fedc08">{{ envTitle ? ` - ${envTitle}` : '' }}</span>
      </div>

      <div :class="['admin-header-right', headerTheme]">
        <div v-if="!hideAcarsTime" class="fs-12 text-color-fff acars-time-text-box">
          最后一条报文时间 {{ $route.path==='/fraMonitoring'?fraAcarsTime:acarsTime }}
        </div>
        <!-- <header-search class="header-item" @active="val => searchActive = val" />
        <a-tooltip class="header-item" title="帮助文档" placement="bottom">
          <a href="https://iczer.gitee.io/vue-antd-admin-docs/" target="_blank">
              <a-icon type="question-circle-o" />
          </a>
        </a-tooltip> -->
        <!-- <a-icon class="top-mm-icon" :component="require('@/assets/icon/Feedback.svg')" @click="jumpFeedBackHandler" /> -->
        <a-icon
          class="top-mm-icon"
          :component="require('@/assets/icon/Application_monitoring.svg')"
          @click="jumpMonitorHandler"
        />
        <Option class="header-item" />
        <header-cloud class="header-item" />
        <header-notice class="header-item" />
        <header-avatar class="header-item" />

        <!-- <a-dropdown class="lang header-item">
          <div>
            <a-icon type="global" /> {{ langAlias }}
          </div>
          <a-menu slot="overlay" :selected-keys="[lang]" @click="val => setLang(val.key)">
            <a-menu-item v-for=" lang in langList" :key="lang.key">{{ lang.key.toLowerCase() + ' ' + lang.name }}</a-menu-item>
          </a-menu>
        </a-dropdown> -->
      </div>
    </div>
  </a-layout-header>
</template>

<script>
// import HeaderSearch from './HeaderSearch';
import HeaderNotice from './HeaderNotice';
import HeaderCloud from './HeaderCloud';
import HeaderAvatar from './HeaderAvatar';
import Option from './Option';
// import IMenu from '@/components/menu/menu';
import { mapState, mapMutations } from 'vuex';
import logoImg from '@/assets/img/Logo_new.svg';
export default {
  name: 'AdminHeader',
  components: {
    // IMenu,
    HeaderAvatar,
    HeaderNotice,
    HeaderCloud,
    Option
    //  HeaderSearch
  },
  // eslint-disable-next-line vue/require-prop-types
  props: ['collapsed', 'menuData'],
  data() {
    return {
      logoImg,
      langList: [
        { key: 'CN', name: '简体中文', alias: '简体' },
        { key: 'HK', name: '繁體中文', alias: '繁體' },
        { key: 'US', name: 'English', alias: 'English' }
      ],
      searchActive: false
    };
  },
  computed: {
    ...mapState('setting', [
      'theme',
      'isMobile',
      'layout',
      'systemName',
      'lang',
      'pageWidth',
      'fraAcarsTime',
      'acarsTime'
    ]),
    hideAcarsTime() {
      return this.$route.meta.hideAcarsTime ?? false;
    },
    headerTheme() {
      if (
        this.layout === 'side' &&
        this.theme.mode === 'dark' &&
        !this.isMobile
      ) {
        return 'light';
      }
      return this.theme.mode;
    },
    langAlias() {
      const lang = this.langList.find(item => item.key === this.lang);
      return lang.alias;
    },
    menuWidth() {
      const { layout, searchActive } = this;
      const headWidth = layout === 'head' ? '100% - 188px' : '100%';
      const extraWidth = searchActive ? '600px' : '400px';
      return `calc(${headWidth} - ${extraWidth})`;
    },
    envTitle() {
      return process.env.VUE_APP_HEADER_TITLE || '';
    }
  },
  methods: {
    toggleCollapse() {
      this.$emit('toggleCollapse');
    },
    onSelect(obj) {
      this.$emit('menuSelect', obj);
    },
    ...mapMutations('setting', ['setLang']),
    clickLogoHandler() {
      this.$router.go(0);
    },
    jumpMonitorHandler() {
      const routeData = this.$router.resolve({
        path: '/fraMonitoringSetting'
      });

      window.open(routeData.href, '_blank');
    },
    jumpFeedBackHandler() {}
  }
};
</script>

<style lang="less" scoped>
@import 'index';
</style>

<style lang="less">
.top-mm-icon {
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  svg {
    cursor: pointer;
  }
  path {
    fill: #edeff8;
  }
  &:hover {
    background-color: rgba(0, 0, 0, 0.24);
  }
}
.acars-time-text-box{
    display: flex;
    align-items: center;
    line-height: initial;
    margin-right: 36px;
}
</style>
